<template>
  <!-- <div> -->
    <div class="container">
      <div class="tit1">平台核心</div>
         <div class="case1">
           <ul>
              <li>
                 <div><img  class="img_case1" src="../../assets/img/A11.png" alt=""></div>
                 <div class="text_case1">基本算法库</div>
                 <div class="desc_case1">本平台包含六个经典图像算法的实现，包括人脸识别，人脸检测，行人检测，人体姿态估计，车牌识别，车辆检测。</div>
              </li>
              <li>
                  <div><img class="img_case1"  src="../../assets/img/A12.png" alt=""></div>
                  <div class="text_case1">虚拟仿真平台</div>
                  <div class="desc_case1">通过车牌识别的检测虚拟仿真过程，能够很好的理解真实世界图像处理是一个复杂的工程任务。</div>
              </li>
              <li>
                   <div><img class="img_case1" style="width: 146px;height: 146px;border: 2px solid #273471;border-radius: 50%;"  src="../../assets/img/A13.png" alt=""></div>
                   <div class="text_case1">课程管理中心</div>
                   <div class="desc_case1">教师用户基于课程管理中心可以极大的便利对学生用户的管理，以及对实验进度的把握，</div>
              </li>
            </ul>
          </div>
          <div style="background: #f5f5f5;float: left;width: 100%;overflow: hidden;">
            <div class="tit1">功能构成</div>
              <div class="case2">
              	<ul>
                  <li style="display: block;">
                    <div style="float: left;width: 49%;">
                        <div class="content_li">
                          <div class="case2_img"><img src="../../assets/img/A1E.jpg" width="100%" alt=""></div>
                          <div class="case2_text">仿真应用场景</div>
                          <div class="case2_desc">充分利用车牌识别过程中需要进行的图像处理,包括灰度处理,高斯模糊,膨胀操作等算法,让用户从视觉上就可以体验虚拟仿真就是在解决难以在现实中实现的计算机综合应用技术。</div>
                        </div>
                        <div class="content_li">
                          <div class="case2_img"><img src="../../assets/img/A1E.jpg" width="100%" alt=""></div>
                          <div class="case2_text">图像的AI算法</div>
                          <div class="case2_desc">将成熟的深度学习、强化学习算法应用于虚拟仿真场景，并支持通过自定义图像进行体验和学习。</div>
                        </div>
                      </div>
                      <div class="img_case2"><img src="../../assets/img/E13.jpg" width="80%" alt=""></div>
                  </li>
                 <li style="display: block;">
                    <div><img class="img_case3" src="../../assets/img/E12.jpg" width="80%" alt=""></div>
                      <div style="width: 49%;float: right;">
                        <div class="content_li2">
                          <div class="case3_img"><img src="../../assets/img/A1E.jpg" width="100%" alt=""></div>
                          <div class="case2_text">在线互动</div>
                          <div class="case2_desc">用户进入系统可以根据不同的虚拟仿真实验和任课教师进行沟通和交流,教师可在指导时间内,发布任务,进入互动中心与学生进行线上互动。</div>
                        </div>
                       <div class="content_li2">
                          <div class="case3_img"><img src="../../assets/img/A1E.jpg" width="100%" alt=""></div>
                          <div class="case2_text">交流中心</div>
                          <div class="case2_desc">本系统支持社区发帖留言,用户可以针对每个虚拟仿真实验教程提出自己的疑惑,学生和教师用户可以对其进行评论和回复。</div>
                        </div>
                      </div>
                  </li>
                </ul>
             </div>
        </div>

          </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {

      }
    }
  }
</script>

<style scoped lang="scss">
  ul{
    list-style: none;
  }
  // 
  .tit1{
    // margin-top: 0;
    float: left;
    width: 100%;
    text-align: center;
    color: #2f2f2f;
    font-size: 36px;
    line-height: 46px;
  }
  .case1{
    float: left;
    width: 100%;
    margin: 1.21% 0 4.48% 0;
    overflow: hidden;
  }
  .case2{
    float: left;
    width: 100%;
    padding: 24px 0 6px 0;
    position: relative;
  }
  .case1 li{
   width: 33.333%;
   padding: 20px 25px;
   float: left;
   padding: 41px 56px;
   text-align: center;
  }

  .img_case1{
    width: 146px;
    height: 146px;
    border-radius: 50%;
    border: 2px solid #273471;
  }
  .text_case1{
    float: left;
    width: 100%;
    color: #282828;
    font-size: 20px;
    line-height: 30px;
    margin: 26px 0 39px 0;
  }
  .desc_case1{
    float: left;
    width: 100%;
    color: #6f6f6f;
    font-size: 16px;
    line-height: 28px;
  }
  .img_case2{
    float: left;
    width: 47.5%;
    line-height: 0;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
  }
  .img_case3{
    float: left;
    right: auto;
    left: 0;
    float: right;
    width: 47.5%;
    line-height: 0;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
  }
  .content_li{
    float: left;
    width: 100%;
    padding-left: 79px;
    position: relative;
  }
  .case2 li {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 50px;
  }
  .case3_img{
    float: left;
        width: 55px;
        line-height: 0;
        position: absolute;
        left: 0;
        top: 0;
  }
  .content_li2{
        float: left;
        width: 100%;
        padding-left: 79px;
        position: relative;
  }
  .case3_img{
    float: left;
    width: 55px;
    line-height: 0;
    position: absolute;
    left: 0;
    top: 0;
  }
  .case2_img{
    float: left;
        width: 55px;
        line-height: 0;
        position: absolute;
        left: 0;
        top: 0;
  }

  .case2_text {
          float: left;
          width: 100%;
          color: #2f2f2f;
          font-size: 24px;
          line-height: 34px;
          margin: 12px 0 26px 0;
  }
  .case2_desc {
     float: left;
         width: 100%;
         color: #545454;
         font-size: 16px;
         line-height: 27px;

  }
</style>
